<script setup lang="ts" name="cockpit-index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus';

// 引入插件
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay,
} from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue'
import "swiper/scss";
import "swiper/scss/navigation";
import "swiper/scss/pagination";

// 引入组件
import security from '@/views/home/cockpit/inspect/security.vue';
import attendance from '@/views/home/cockpit/inspect/attendance.vue';
import surroundings from '@/views/home/cockpit/inspect/surroundings.vue';
import aqi from '@/views/home/cockpit/inspect/aqi.vue';
import gatecarda from '@/views/home/cockpit/inspect/gatecarda.vue';
import gatechas from '@/views/home/cockpit/inspect/gatechas.vue';
import securityb from '@/views/home/cockpit/inspect/securityb.vue';
// 引入图片
import asd45 from '@/assets/image/niaokan1.png'
import asd46 from '@/assets/image/niaokan2.png'
import a1 from '@/assets/image/home/a11.png'
import a2 from '@/assets/image/home/a12.png'
import a3 from '@/assets/image/home/a13.png'
import a4 from '@/assets/image/home/a14.png'
import a5 from '@/assets/image/home/a15.png'
import a6 from '@/assets/image/home/a16.png'
import a7 from '@/assets/image/home/a17.png'
import a8 from '@/assets/image/home/a18.png'

import b1 from '@/assets/image/home/img1.jpg'
import b2 from '@/assets/image/home/img2.jpg'
import b3 from '@/assets/image/home/img3.jpg'
import b4 from '@/assets/image/home/img4.jpg'
import b5 from '@/assets/image/home/img5.jpg'
import b6 from '@/assets/image/home/img6.jpg'
import b7 from '@/assets/image/home/img7.jpg'
import request from "@/api";
SwiperCore.use([Navigation, Pagination, Scrollbar, Autoplay]);
const router = useRouter()
// const go = () => {
//   router.push({ name: "page2", params: { a: 1 } })
// }
// 环境监控
const ambient = reactive([
  {
    url: a1,
    name: '空气指数',
    number: '优',
  },
  {
    url: a3,
    name: 'PM2.5',
    number: '0',
  },
  {
    url: a5,
    name: '温度',
    number: '33.6',
  },
  {
    url: a7,
    name: '风速',
    number: '1.3m/s',
  },
])
const ambient1 = reactive([
  {
    url: a2,
    name: '噪声',
    number: '52.4',
  },
  {
    url: a4,
    name: 'PM10',
    number: '49.6',
  },
  {
    url: a6,
    name: '湿度',
    number: '54.2',
  },
  {
    url: a8,
    name: '风向',
    number: '西风',
  },
])
// 轮播滚动
// SwiperCore.use([Navigation, Pagination, Scrollbar, Autoplay]);
let list = reactive([
  { url: asd45 },
  { url: asd46 },
  { url: asd45 },
  { url: asd46 },
])

// 项目信息
const cockpit = ref({
  name: '工业区A区段钢筋厂房设施项目B2标段',
  state: '在建',
  company: '河北集团建筑安装工程有限公司',
  time: '2020-05-09'
})
// 安全质量检查
const activeName = ref('first')
const activeName1 = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const handleClick1 = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
// 实时动态
const lists = reactive([
  {
    img: b1,
    name: '周利民',
    time: '08-19 12:17',
    go: '离场',
    tempe: '36.6'
  },
  {
    img: b2,
    name: '王立厚',
    time: '08-19 12:24',
    go: '离场',
    tempe: '36.5'
  },
  {
    img: b3,
    name: '张大都',
    time: '08-19 12:14',
    go: '离场',
    tempe: '36.6'
  },
  {
    img: b4,
    name: '李东飞',
    time: '08-19 12:48',
    go: '离场',
    tempe: '36.4'
  },
  {
    img: b5,
    name: '安智会',
    time: '08-19 12:13',
    go: '离场',
    tempe: '36.7'
  },
  {
    img: b6,
    name: '刘成军',
    time: '08-19 12:36',
    go: '离场',
    tempe: '36.8'
  },
  {
    img: b7,
    name: '曹晨曦',
    time: '08-19 12:26',
    go: '离场',
    tempe: '36.6'
  },
  {
    img: b1,
    name: '周利民',
    time: '08-19 12:17',
    go: '离场',
    tempe: '36.6'
  },
  {
    img: b2,
    name: '王立厚',
    time: '08-19 12:24',
    go: '离场',
    tempe: '36.5'
  },
  {
    img: b3,
    name: '张大都',
    time: '08-19 12:14',
    go: '离场',
    tempe: '36.6'
  },
  {
    img: b4,
    name: '李东飞',
    time: '08-19 12:48',
    go: '离场',
    tempe: '36.4'
  },
  {
    img: b5,
    name: '安智会',
    time: '08-19 12:13',
    go: '离场',
    tempe: '36.7'
  },
  {
    img: b6,
    name: '刘成军',
    time: '08-19 12:36',
    go: '离场',
    tempe: '36.8'
  },
  {
    img: b7,
    name: '曹晨曦',
    time: '08-19 12:26',
    go: '离场',
    tempe: '36.6'
  },
])
const lists1 = reactive([
  {
    id: 1,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 2,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 3,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 4,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 5,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 6,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 7,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 8,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 9,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
  {
    id: 10,
    name: '闸机人脸识别设备掉线通知',
    time: '08-19 12:17',
    go: '编号为042117020005的设备掉线时间为2022-08-14 20:11:02，请您及时关注',
  },
])

// 设备信息弹窗
const dialogTableVisible = ref(false)
const gridData = [
  {
    date: '摄像头设备',
    name: '41',
    add: '34',
    addr: '82.93',
    addre: '7',
    addres: '17.07',
  },
  {
    date: '升降机',
    name: '4',
    add: '0',
    addr: '0',
    addre: '4',
    addres: '100',
  },
  {
    date: '人脸识别',
    name: '48',
    add: '9',
    addr: '18.75',
    addre: '39',
    addres: '81.25',
  },
  {
    date: '基坑',
    name: '2',
    add: '0',
    addr: '0',
    addre: '2',
    addres: '100',
  },
  {
    date: '环参设备',
    name: '6',
    add: '3',
    addr: '50',
    addre: '3',
    addres: '100',
  },
  {
    date: '高支模',
    name: '1',
    add: '1',
    addr: '100',
    addre: '0',
    addres: '0',
  },
  {
    date: '喷淋联动设备',
    name: '10',
    add: '0',
    addr: '0',
    addre: '10',
    addres: '100',
  },
  {
    date: '塔机监控',
    name: '35',
    add: '0',
    addr: '0',
    addre: '35',
    addres: '100',
  },
  {
    date: '卸料平台',
    name: '3',
    add: '0',
    addr: '0',
    addre: '35',
    addres: '100',
  },
]

//table当前分页参数
const total = ref(gridData.length) //总条数
const page = reactive({//配置对应的查询参数
  pageNum: 1,
  pageSize: 10,
});

</script>

<template>
  <div class="cockpit-page">
    <!-- 视图左 -->
    <div class="cockpit-page-left-a">
      <!-- 上 -->
      <div class="cockpit-page-left-a-top">
        <app-box class="energy-en" :title="'项目信息'">
          <div class="cockpit-page-left-a-top-text">
            <span>项目名称：</span>
            <span class="cockpit-page-text">{{ cockpit.name }}</span>
          </div>
          <div class="cockpit-page-left-a-top-text">
            <span>项目状态：</span>
            <span class="cockpit-page-text">{{ cockpit.state }}</span>
          </div>
          <div class="cockpit-page-left-a-top-text">
            <span>总承包单位：</span>
            <span class="cockpit-page-text">{{ cockpit.company }}</span>
          </div>
          <div class="cockpit-page-left-a-top-text">
            <span>建设日期：</span>
            <span class="cockpit-page-text">{{ cockpit.time }}</span>
          </div>
        </app-box>
      </div>
      <!-- 中 -->
      <div class="cockpit-page-left-a-mid">
        <app-box class="energy-en" :title="'安全质量检查'">
          <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
            <el-tab-pane label="安全检查" name="first" :lazy="true">

              <div class="energy-en-text">
                安全检查
              </div>
              <div class="energy-en-img">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
              </div>
              <div class="energy-en-img-nub">
                <span class="energy-en-img-span-a">0</span>
                <span class="energy-en-img-span-b">2</span>
                <span class="energy-en-img-span-c">6</span>
              </div>
              <div class="energy-en-img">
                <span class="energy-en-img-span-a">待整改</span>
                <span class="energy-en-img-span-b">待检查</span>
                <span class="energy-en-img-span-c">已完成</span>
              </div>
              <div class="energy-en-text-a">
                安全问题趋势
              </div>
              <div class="echarts-box">
                <securityb></securityb>
              </div>
            </el-tab-pane>
            <el-tab-pane label="质量检查" name="second" :lazy="true">
              <div class="energy-en-text">
                质量检查
              </div>
              <div class="energy-en-img">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
                <img class="energy-en-img-a" src="@/assets/image/yibao.png" alt="">
              </div>
              <div class="energy-en-img-nub">
                <span class="energy-en-img-span-a">1</span>
                <span class="energy-en-img-span-b">3</span>
                <span class="energy-en-img-span-c">8</span>
              </div>
              <div class="energy-en-img">
                <span class="energy-en-img-span-a">待整改</span>
                <span class="energy-en-img-span-b">待检查</span>
                <span class="energy-en-img-span-c">已完成</span>
              </div>
              <div class="energy-en-text-a">
                安全问题趋势
              </div>
              <div class="echarts-box">
                <security></security>
              </div>
            </el-tab-pane>
          </el-tabs>
        </app-box>
      </div>
      <!-- 下 -->
      <div class="cockpit-page-left-a-bottom">
        <!-- 设备信息 -->
        <app-box class="energy-en" :title="'设备信息'">
          <div class="energy-en-text-a">
            <div>设备连接率</div>
            <div class="cockpit-bottom">
              <el-progress type="circle" :width="100" :percentage="46" />
              <div class="cockpit-bottom-right">
                <div class="cockpit-bottom-right-box" @click="dialogTableVisible = true">
                  <span>设备数量：</span>
                  <span class="cockpit-bottom-right-span">165</span>
                </div>
                <div class="cockpit-bottom-right-box">
                  <span>在线设备：</span>
                  <span class="cockpit-bottom-right-span">78</span>
                </div>
              </div>
            </div>
          </div>
        </app-box>
      </div>
      <!-- 弹窗 -->
      <el-dialog v-model="dialogTableVisible" title="设备数量">
        <el-table :data="gridData">
          <el-table-column property="date" label="设备类型" />
          <el-table-column property="name" label="设备总数" />
          <el-table-column property="add" label="在线率(%)" />
          <el-table-column property="addr" label="离线个数" />
          <el-table-column property="addre" label="离线率(%)" />
          <el-table-column property="addres" label="在线个数" />
        </el-table>
        <div class="pagination" style="display: flex;justify-content: right;margin-top: 10px;">

          <!--分页组件-->
          <el-pagination layout="prev, pager, next" :total="10" />
        </div>
      </el-dialog>
    </div>
    <div class="cockpit-page-left-b">
      <div class="cockpit-page-left-b-top">
        <!-- 轮播图 -->
        <swiper :slides-per-view="1" :autoplay="{ disableOnInteraction: false }" loop :scrollbar="{ draggable: true }"
          class="swiper">

          <swiper-slide class="swiper-slide" :slidesPerView="5" v-for="(item, index) in list" :key="index">
            <img :src="item.url" alt="">
          </swiper-slide>
        </swiper>
      </div>
      <div class="cockpit-page-left-b-mid">
        <app-box class="energy-en" :title="'总出勤趋势图'">
          <div class="cockpit-mid">
            <attendance></attendance>
          </div>
        </app-box>
      </div>
      <div class="cockpit-page-left-b-bottom">
        <app-box class="energy-en" :title="'环境质量趋势'">
          <div class="cockpit-mid">
            <surroundings></surroundings>
          </div>
        </app-box>
      </div>
    </div>
    <!-- 视图右 -->
    <div class="cockpit-page-right-a">
      <div class="cockpit-page-right-a-top">
        <app-box class="energy-en" :title="'环境监控'">
          <div class="energy-en-box">
            <div class="energy-en-top">
              <!-- 环境监控 -->
              <!-- 左 -->
              <div class="energy-en-top-l">
                <!-- item -->
                <div class="energy-en-top-l-a" v-for="(item, index) in ambient" :key="index">
                  <img class="energy-en-top-l-a-img" :src="item.url" alt="">
                  <div class="energy-en-top-img">
                    <div class="energy-en-top-img-a">
                      {{ item.name }}
                    </div>
                    <img class="energy-en-top-img-a-img" src="../../../assets/image/home/b2.png" alt="">
                    <div class="energy-en-top-img-b">
                      {{ item.number }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 右 -->
              <div class="energy-en-top-r">
                <!-- item -->
                <div class="energy-en-top-l-a" v-for="(item, index) in ambient1" :key="index">
                  <img class="energy-en-top-l-a-img" :src="item.url" alt="">
                  <div class="energy-en-top-img">
                    <div class="energy-en-top-img-a">
                      {{ item.name }}
                    </div>
                    <img class="energy-en-top-img-a-img" src="../../../assets/image/home/b2.png" alt="">
                    <div class="energy-en-top-img-b">
                      {{ item.number }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="energy-en-bottom">
              <div class="energy-en-bottom-text">AQI指数</div>
              <aqi></aqi>
            </div>
          </div>
        </app-box>
      </div>
      <div class="cockpit-page-right-a-bottom">
        <app-box class="energy-en" :title="'出勤管理'">
          <el-tabs v-model="activeName1" @tab-click="handleClick1" stretch="true">
            <el-tab-pane label="劳务人员" name="first" :lazy="true">
              <div class="energy-en-number">
                <div class="energy-en-number-box">
                  <div>出勤人数</div>
                  <span class="energy-en-number-box-span">798</span>
                  <span>人</span>
                </div>
                <div class="energy-en-number-box">
                  <div>在册人数</div>
                  <span class="energy-en-number-box-span">1198</span>
                  <span>人</span>
                </div>
              </div>
              <div class="energy-en-text">
                出勤趋势图
              </div>
              <div class="energy-en-text-echas">
                <gatecarda></gatecarda>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管理人员" name="second" :lazy="true">
              <div class="energy-en-number">
                <div class="energy-en-number-box">
                  <div>出勤人数</div>
                  <span class="energy-en-number-box-span">128</span>
                  <span>人</span>
                </div>
                <div class="energy-en-number-box">
                  <div>在册人数</div>
                  <span class="energy-en-number-box-span">389</span>
                  <span>人</span>
                </div>
              </div>
              <div class="energy-en-text">
                出勤趋势图
              </div>
              <div class="energy-en-text-echas">
                <gatechas></gatechas>
              </div>
            </el-tab-pane>
          </el-tabs>
        </app-box>
      </div>
    </div>
    <div class="cockpit-page-right-b">
      <div class="cockpit-page-right-b-top">
        <app-box class="energy-en" :title="'实时动态'">
          <div class="cockpit-page-head">
            <div class="cockpit-page-head-top">
              <div class="cockpit-page-head-top-box">人脸信息</div>
              <div class="cockpit-page-head-top-box">姓名</div>
              <div class="cockpit-page-head-top-box">时间</div>
              <div class="cockpit-page-head-top-box">进出状态</div>
              <div class="cockpit-page-head-top-box">体温</div>
            </div>
            <div class="cockpit-page-text">
              <swiper class="swiper" direction="vertical" :slidesPerView="5" :autoplay="{ disableOnInteraction: true }"
                :scrollbar="{ draggable: true }">
                <swiper-slide class="swiper-slide" v-for="(item, index) in lists" :key="index">
                  <img class="cockpit-page-text-item-index" :src="item.img" alt="">
                  <div class="cockpit-page-text-item-index">{{ item.name }}</div>
                  <div class="cockpit-page-text-item-index">{{ item.time }}</div>
                  <div class="cockpit-page-text-item-index">{{ item.go }}</div>
                  <div class="cockpit-page-text-item-index">{{ item.tempe }}</div>
                </swiper-slide>
              </swiper>
            </div>
          </div>
        </app-box>
      </div>
      <div class="cockpit-page-right-b-bottom">
        <app-box class="energy-en" :title="'设备日志'">
          <div class="cockpit-page-head">
            <div class="cockpit-page-head-top">
              <div class="cockpit-page-head-top-boxid">序号</div>
              <div class="cockpit-page-head-top-box">类型</div>
              <div class="cockpit-page-head-top-box">时间</div>
              <div class="cockpit-page-head-top-box">内容</div>
            </div>
            <div class="cockpit-page-text">
              <swiper class="swiper" direction="vertical" :slidesPerView="5" :autoplay="{ disableOnInteraction: true }"
                :scrollbar="{ draggable: true }">
                <swiper-slide class="swiper-slide" v-for="(item, index) in lists1" :key="index">
                  <div class="cockpit-page-text-item-indexid">
                    <el-tooltip placement="top">
                      <template #content>{{ item.id }}</template>
                      {{ item.id }}
                    </el-tooltip>
                  </div>
                  <div class="cockpit-page-text-item-index">
                    <el-tooltip placement="top">
                      <template #content>{{ item.name }}</template>
                      {{ item.name }}
                    </el-tooltip>
                  </div>
                  <div class="cockpit-page-text-item-index-a">
                    <el-tooltip placement="top">
                      <template #content>{{ item.time }}</template>
                      {{ item.time }}
                    </el-tooltip>
                  </div>
                  <div class="cockpit-page-text-item-index">
                    <el-tooltip placement="top">
                      <template #content>{{ item.go }}</template>
                      {{ item.go }}
                    </el-tooltip>
                  </div>
                </swiper-slide>
              </swiper>
            </div>
          </div>
        </app-box>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 切换样式
// 主图
.cockpit-page {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #141414;
}

// 视图左A
.cockpit-page-left-a {
  width: 21%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // 上
  .cockpit-page-left-a-top {
    width: 100%;
    height: 24%;

    .energy-en {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .cockpit-page-left-a-top-text {
        padding: 2px;
        font-size: 12px;
        // color: #61c0fe;
        color: #53a3d8;

        .cockpit-page-text {
          color: #aad3fb;
        }
      }
    }
  }

  // 中
  .cockpit-page-left-a-mid {
    width: 100%;
    height: calc(47.5% - 10px);

    .energy-en {
      height: 100%;
      overflow: auto;

      // 安全问题趋势
      .echarts-box {
        width: 100%;
        height: 160px;
        // background-color: #141414;
      }

      .energy-en-text-a {
        color: #91abbe;
        margin: 5px 0;
        font-size: 14px;
      }

      .energy-en-text {
        color: #91abbe;
        margin-bottom: 5px;
        font-size: 14px;
      }


      .energy-en-img {
        width: 100%;
        display: flex;
        justify-content: space-around;

        .energy-en-img-span-a {
          width: 33%;
          text-align: center;
          font-size: 12px;
          color: rgb(184, 86, 47);

        }

        .energy-en-img-span-b {
          width: 33%;
          text-align: center;
          font-size: 12px;
          color: rgb(253, 217, 18);
        }

        .energy-en-img-span-c {
          width: 33%;
          text-align: center;
          font-size: 12px;
          color: rgb(89, 224, 214);
        }

        img {
          width: 25%;
        }
      }

      .energy-en-img-nub {
        display: flex;
        justify-content: space-around;
        margin-top: -25px;
        font-family: Impact;
        font-weight: 400;
        font-size: 22px;

        .energy-en-img-span-a {
          width: 33%;
          text-align: center;
          color: rgb(255, 72, 0);

        }

        .energy-en-img-span-b {
          width: 33%;
          text-align: center;
          color: rgb(253, 217, 18);
        }

        .energy-en-img-span-c {
          width: 33%;
          text-align: center;
          color: rgb(89, 224, 214);
        }
      }
    }
  }

  // 下
  .cockpit-page-left-a-bottom {
    width: 100%;
    height: calc(28.5% - 10px);

    // background-color: aqua;
    .energy-en {
      height: 100%;
    }

    .energy-en-text-a {
      height: calc(100% - 50px);
      color: #91abbe;
      margin: 5px 0;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;


      .cockpit-bottom {
        display: flex;
        justify-content: space-around;
      }

      .cockpit-bottom-right {
        font-size: 14px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .cockpit-bottom-right-box {
          padding: 5px 10px;
          border: 1px solid rgba(2, 186, 219, .4);
          background: linear-gradient(0deg, rgba(29, 29, 29, .4) 52%, rgba(61, 171, 255, .2));
          cursor: pointer;
        }

        .cockpit-bottom-right-span {
          font-size: 18px;
          font-family: Impact;
          font-weight: 400;
          font-size: 22px;
          color: #49b6ff;
        }
      }
    }


  }
}

//  视图左B 
.cockpit-page-left-b {
  width: calc(35.5% - 15px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // 上
  .cockpit-page-left-b-top {
    width: 100%;
    height: calc(45% - 10px);

    // background-color: rgb(133, 26, 88);
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      background-position: center;
      background-size: 100% 100%;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  // 中
  .cockpit-page-left-b-mid {
    width: 100%;
    height: calc(26.5% - 0px);

    .energy-en {
      height: 100%;
    }

    .cockpit-mid {
      width: 100%;
      height: calc(100% - 40px);
    }
  }

  // 下
  .cockpit-page-left-b-bottom {
    width: 100%;
    height: calc(28.5% - 10px);

    .energy-en {
      height: 100%;
    }

    .cockpit-mid {
      width: 100%;
      height: calc(100% - 40px);
    }

  }
}

// 视图右A
.cockpit-page-right-a {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // 上
  .cockpit-page-right-a-top {
    width: 100%;
    height: calc(45% - 10px);

    .energy-en {
      width: 100%;
      height: 100%;

      .energy-en-box {
        height: calc(100% - 40px);

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .energy-en-top {
          height: calc(50% - 8px);
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          // background-color: #91abbe;

          .energy-en-top-l {
            width: calc(50% - 3px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // background-color: #b64343;

            .energy-en-top-l-a img {
              width: 30px;
              height: 30px;
            }

            .energy-en-top-l-a {
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;

              .energy-en-top-l-a-img {
                width: 25px;
                height: 25px;
              }
            }

            .energy-en-top-img {
              width: calc(100% - 35px);
              height: 25px;
              padding: 0 6px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              background-image: url('../../../assets/image/home/b1.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;

              .energy-en-top-img-a {
                color: #91abbe;
                font-size: 14px;
              }

              .energy-en-top-img-b {
                color: #49b6ff;
                font-size: 14px;
              }

              .energy-en-top-img-a-img {
                width: 1px;
                height: 100%;
              }
            }
          }

          .energy-en-top-r {
            width: calc(50% - 3px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            // background-color: #34c760;
            .energy-en-top-l-a img {
              width: 30px;
            }

            .energy-en-top-l-a {
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;

              .energy-en-top-l-a-img {
                width: 25px;
                height: 25px;
              }
            }

            .energy-en-top-img {
              width: calc(100% - 35px);
              height: 25px;
              padding: 0 6px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              background-image: url('../../../assets/image/home/b1.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;

              .energy-en-top-img-a {
                color: #91abbe;
                font-size: 14px;
              }

              .energy-en-top-img-b {
                color: #49b6ff;
                font-size: 14px;
              }

              .energy-en-top-img-a-img {
                width: 1px;
                height: 100%;
              }
            }
          }
        }

        .energy-en-bottom {
          height: calc(50% - 8px);

          .energy-en-bottom-text {
            color: #91abbe;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 下
  .cockpit-page-right-a-bottom {
    width: 100%;
    height: 55%;

    .energy-en {
      width: 100%;
      height: 100%;
      overflow: auto;

      .energy-en-number {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .energy-en-number-box {
          width: calc(50% - 5px);
          font-size: 14px;
          text-align: center;
          padding: 5px;
          border: 1px solid rgba(2, 186, 219, .4);
          background: linear-gradient(0deg, rgba(29, 29, 29, .4) 52%, rgba(61, 171, 255, .2));

          .energy-en-number-box-span {
            font-size: 42px;
            font-family: Impact;
            font-weight: 400;
            margin-right: 10px;
            color: #3dabff;
          }
        }
      }

      .energy-en-text {
        margin: 5px 0;
        font-size: 14px;
        color: #91abbe;
      }

      .energy-en-text-echas {
        width: 100%;
        height: 230px;
      }
    }
  }
}

// 视图右B
.cockpit-page-right-b {
  width: calc(23.5% - 15px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // 上
  .cockpit-page-right-b-top {
    width: 100%;
    height: calc(52% - 0px);

    .energy-en {
      width: 100%;
      height: 100%;

      .cockpit-page-head {
        height: calc(100% - 40px);

        .cockpit-page-head-top {
          width: 100%;
          height: 40px;
          margin-top: 5px;
          background-color: #3dabff;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 1px solid rgba(2, 186, 219, .4);
          background: linear-gradient(0deg, rgba(29, 29, 29, .4) 52%, rgba(61, 171, 255, .2));

          .cockpit-page-head-top-box {
            width: 20%;
            text-align: center;
            font-size: 14px;
          }
        }

        .cockpit-page-text {
          // margin-top: 10px;
          height: calc(100% - 50px);

          .swiper {
            width: 100%;
            height: 100%;
            margin-top: 10px;
          }

          .swiper-slide {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .cockpit-page-text-item-index {
              width: 20%;
              height: 95%;
              color: #aad3fb;
              font-size: 14px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }

  // 下
  .cockpit-page-right-b-bottom {
    width: 100%;
    height: calc(48% - 10px);

    .energy-en {
      width: 100%;
      height: 100%;

      .cockpit-page-head {
        height: calc(100% - 40px);

        .cockpit-page-head-top {
          width: 100%;
          height: 40px;
          margin-top: 5px;
          background-color: #3dabff;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 1px solid rgba(2, 186, 219, .4);
          background: linear-gradient(0deg, rgba(29, 29, 29, .4) 52%, rgba(61, 171, 255, .2));

          .cockpit-page-head-top-boxid {
            width: 10%;
            text-align: center;
            font-size: 14px;
          }

          .cockpit-page-head-top-box {
            width: 26%;
            text-align: center;
            font-size: 14px;
          }
        }

        .cockpit-page-text {
          // margin-top: 10px;
          height: calc(100% - 50px);

          .swiper {
            width: 100%;
            height: 100%;
            margin-top: 10px;
          }

          .swiper-slide {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .cockpit-page-text-item-indexid {
              width: 10%;
              height: 95%;
              color: #aad3fb;
              font-size: 14px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              overflow: hidden;
              /*超出隐藏*/
              text-overflow: ellipsis;
              /*隐藏后添加省略号*/
              white-space: nowrap;
              /*强制不换行*/
            }

            .cockpit-page-text-item-index {
              width: 26%;
              height: 95%;
              color: #aad3fb;
              font-size: 14px;
              display: flex;
              align-items: center;
              overflow: hidden;
              /*超出隐藏*/
              text-overflow: ellipsis;
              /*隐藏后添加省略号*/
              white-space: nowrap;
              /*强制不换行*/
            }

            .cockpit-page-text-item-index-a {
              width: 26%;
              height: 95%;
              color: #aad3fb;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              /*超出隐藏*/
              text-overflow: ellipsis;
              /*隐藏后添加省略号*/
              white-space: nowrap;
              /*强制不换行*/
            }
          }
        }
      }
    }
  }
}
</style>

